{% stylesheet %}
  .block_comment .block_comment_list ul {
    display: grid;
    row-gap: 60px;
    column-gap: 60px;
    grid-template-columns: repeat(3, calc(33.333% - 40px));
  }

  .block_comment .block_comment_list li {
    text-align: center;
    list-style-type: none;
    overflow: hidden;
  }

  .block_comment .block_comment_list_svg {
    margin-bottom: 30px;
  }

  .block_comment .block_comment_list_star {
    margin-bottom: 30px;
    height: 16px;
  }

  .block_comment .block_comment_list_star svg + .block_comment .block_comment_list_star svg {
    margin-left: 4px;
  }

  .block_comment .block_comment_list_content {
    margin-bottom: 10px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--detail_color);
  }

  .block_comment .block_comment_list_time {
    color: var(--detail_color);
    margin-bottom: 10px;
  }

  .block_comment .block_comment_list_author {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .block_comment .block_comment_list_author img {
    width: 20px;
    margin-right: 5px;
  }

  .block_comment .block_comment_more {
    text-align: center;
    margin-top: calc(var(--general_layout_spacing) * 0.5);
  }

  .block_comment .block_comment_more a {
    margin-top: 0;
  }

  @media (max-width: 767px) {
    .block_comment .block_comment_list ul {
      display: block;
    }
    .block_comment .block_comment_list li {
      margin-bottom: 60px;
    }
    .block_comment .block_comment_list_star {
      margin-bottom: 20px;
    }
    .block_comment .block_comment_list_svg {
      margin-bottom: 20px;
      height: 24px;
    }
  }

  .block_comment .block_comment_swiper {
    text-align: center;
    display: none;
  }
  .block_comment .block_comment_swiper .swiper-slide {
    height: auto;
  }
  .block_comment .block_comment_swiper .swiper-slide .content {
    background-color: var(--page_background_color);
    box-shadow: 0px 15px 40px 1px rgba(0, 0, 0, 0.07);
    border-radius: 5px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
  }
  .block_comment .block_comment_list_author {
    margin-bottom: 0;
  }
  .block_comment .block_comment_swiper .swiper-wrapper {
    transition: all 0ms ease 0s;
  }
  .block_comment .block_comment_swiper .swiper_nav_wrap {
    margin-top: 60px;
    display: flex;
    gap: 20px;
    justify-content: center;
    position: relative;
    z-index: 120;
  }
  .block_comment .block_comment_swiper .swiper_nav_wrap :is(.button-prev,.button-next) {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    box-shadow: 0px 3px 15px 1px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: none;
    cursor: pointer;
    outline: none;
  }
  .block_comment .block_comment_swiper .swiper_nav_wrap :is(.button-prev,.button-next) svg {
    width: 22px;
    outline: none;
  }
  .block_comment .block_comment_swiper .swiper_nav_wrap .swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
  }
  .block_comment .block_comment_swiper .swiper_nav_wrap .button-next svg {
    transform: rotate(180deg);
  }
{% endstylesheet %}
{% assign blockId = block_id | default: section.block_id %}

{%- capture product_id -%}
  {%- if section.settings.range_config.comment_range == 'select_product' -%}
    {{  section.settings.range_config.good_id.id }}
  {%- elsif section.settings.range_config.comment_range == 'current_product' -%}
    {{ product.id }}
  {%- endif -%}
{%- endcapture -%}
{%- capture collection_id -%}
  {%- if section.settings.range_config.comment_range == 'current_collection' -%}
    {{  collection_detail.id }}
  {%- endif -%}
{%- endcapture -%}


{% if theme_preview == '1' or storeConfig.comments_status == '1' %}
  {% get_comments sort_order=id star={section.settings.level} sort_type={ section.settings.time } limit={section.settings.num} comment_range={section.settings.range_config.comment_range} product_id={product_id} collection_id={collection_id} %}
  {% assign score_uncheck_color = theme_config.global.product_score_uncheck_color | default: '#bbbbbb' %}
  {% assign score_selected_color = theme_config.global.product_score_selected_color | default: '#F8AD6B' %}
  
  {% if comments %}
  <div class="block_comment" id="block_comment-{{ blockId }}">
    <div class="container_wrapper">
      {% include 'block_title', title: section.settings.title, detail: section.settings.detail %}

      <div class="block_comment_list">
        <ul style=" grid-template-columns: repeat({{ section.settings.row  }}, 1fr);">
          {% if comments %}
            {% for comment in comments %}
              <li>
                <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                <div class="block_comment_list_star">
                  {% for index in (1..5) %}
                    {% if index <= comment.star %}
                      {% include 'icon_block_star', width: '16', height: '16', color: score_selected_color %}
                    {% else %}
                      {% include 'icon_block_star', width: '16', height: '16', color: score_uncheck_color %}
                    {% endif %}
                  {% endfor %}
                </div>
                {% if comment.comment_title and storeConfig.comments_title_require != '0' %}
                  <div class="block_comment_list_content" style="font-weight: bold; color: #333;margin-bottom: 5px;">
                    {{ comment.comment_title }}
                  </div>
                  {% endif %}
                <div class="block_comment_list_content">
                  {{ comment.content }}
                </div>
                {% if comment.created_at != '' %}
                  <div class="block_comment_list_time">
                    <span class="format-date" data-date="{{ comment.created_at }}" data-format="YYYY-mm-dd">
                      {{- comment.created_at | date: '%Y-%m-%d' -}}
                    </span>
                  </div>
                {% endif %}
                <div class="block_comment_list_author">
                  <img src="{{ comment.national_flag | public_front_asset_url }}"> {{ comment.customer_name }}
                </div>
              </li>
            {% endfor %}

          {% else %}
            {% for index in (1..3) %}
              <li>
                <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                <div class="block_comment_list_star">
                  {% for index in (1..5) %}
                    {% include 'icon_block_star', width: '16', height: '16', color: score_selected_color %}
                  {% endfor %}
                </div>
                <div class="block_comment_list_content">
                  Add customer reviews and testimonials to showcase your store’s happy customers.
                </div>
                <div class="block_comment_list_author">— Author's name</div>
              </li>
            {% endfor %}
          {% endif %}
        </ul>
      </div>
      <div class="block_comment_swiper">
        <div class="swiper" id="swiper-{{ blockId }}">
          <ul class="swiper-wrapper">
            {% if comments %}
              {% for comment in comments %}
                <li class="swiper-slide">
                  <div class="content">
                    <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                    <div class="block_comment_list_star">
                      {% for index in (1..5) %}
                        {% if index <= comment.star %}
                          {% include 'icon_block_star', width: '16', height: '16', color: score_selected_color %}
                        {% else %}
                          {% include 'icon_block_star', width: '16', height: '16', color: score_uncheck_color %}
                        {% endif %}
                      {% endfor %}
                    </div>

                   
                      {% if comment.comment_title and storeConfig.comments_title_require != '0' %}
                      <div class="block_comment_list_content" style="font-weight: bold; color: #333;    margin-bottom: 5px;">
                        {{ comment.comment_title }}
                      </div>
                      {% endif %}
                    <div class="block_comment_list_content">
                      {{ comment.content }}
                    </div>
                    {% if comment.created_at != '' %}
                      <div class="block_comment_list_time">
                        <span class="format-date" data-date="{{ comment.created_at }}" data-format="YYYY-mm-dd">
                          {{- comment.created_at | date: '%Y-%m-%d' -}}
                        </span>
                      </div>
                    {% endif %}
                    <div class="block_comment_list_author">
                      <img src="{{ comment.national_flag | public_front_asset_url }}"> {{ comment.customer_name }}
                    </div>
                  </div>
                </li>
              {% endfor %}
            {% else %}
              {% for index in (1..3) %}
                <li class="swiper-slide">
                  <div class="content">
                    <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                    <div class="block_comment_list_star">
                      {% for index in (1..5) %}
                        {% include 'icon_block_star', width: '16', height: '16', color: score_selected_color %}
                      {% endfor %}
                    </div>
                    <div class="block_comment_list_content">
                      Add customer reviews and testimonials to showcase your store’s happy customers.
                    </div>
                    <div class="block_comment_list_author">— Author's name</div>
                  </div>
                </li>
              {% endfor %}
            {% endif %}
          </ul>
        </div>
        <div class="swiper_nav_wrap">
          <div class="button-prev" id="button-prev-{{ blockId }}">
            <svg t="1715233228414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20277"><path d="M366.72 512l377.6-377.6a40.32 40.32 0 0 0 0-58.24 41.6 41.6 0 0 0-58.24 0L279.68 482.56a40.32 40.32 0 0 0 0 58.24l406.4 406.4a40.32 40.32 0 0 0 29.44 12.16 39.04 39.04 0 0 0 28.8-12.16 41.6 41.6 0 0 0 0-58.24z" fill="#445365" p-id="20278"></path></svg>
          </div>
          <div class="button-next" id="button-next-{{ blockId }}">
            <svg t="1715233228414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20277"><path d="M366.72 512l377.6-377.6a40.32 40.32 0 0 0 0-58.24 41.6 41.6 0 0 0-58.24 0L279.68 482.56a40.32 40.32 0 0 0 0 58.24l406.4 406.4a40.32 40.32 0 0 0 29.44 12.16 39.04 39.04 0 0 0 28.8-12.16 41.6 41.6 0 0 0 0-58.24z" fill="#445365" p-id="20278"></path></svg>
          </div>
        </div>
      </div>
      {% if section.settings.more_text != '' %}
        <div class="block_comment_more">
          <a class="secondary_btn" href="/comments">{{ section.settings.more_text }}</a>
        </div>
      {% endif %}
    </div>
  </div>

  <script>
    $(function () {
      let mobile_style = '{{ section.settings.mobile_style }}' || 0;
      if (moi.isMobile() && mobile_style == 1) {
        $('#block_comment-{{ blockId }} .block_comment_list').hide();
        $('#block_comment-{{ blockId }} .block_comment_swiper').show();

        moi.loadSwiper(8, function() {
          let swiper = new Swiper8('#swiper-{{ blockId }}', {
            watchSlidesProgress: true, 
            resistanceRatio: 0, 
            navigation: {
              nextEl: '#button-next-{{ blockId }}',
              prevEl: '#button-prev-{{ blockId }}',
            },
            on: {
              init: function () {
                let slides = this.slides;
                let offsetX = this.width; 
                let offsetY = 20;
                for (i = 0; i < slides.length; i++) {
                  slide = slides.eq(i);
                  progress = slides[i].progress;
  
                  if (progress <= 0) {
                    
                    slide.transform(
                      'translate3d(' +
                        progress * offsetX +
                        'px, ' +
                        Math.abs(progress) * offsetY +
                        'px, 0) scale(' +
                        (1 - Math.abs(progress) / 20) +
                        ')'
                    );
                    slide.css({ opacity: progress + 3, zIndex: 100 - i }); 
                  }
                }
              },
  
              resize: function (swiper) {
                swiper.update();
              },
  
              setTranslate: function () {
                slides = this.slides;
                let offsetX = this.width; 
                let offsetY = 20;
                for (i = 0; i < slides.length; i++) {
                  slide = slides.eq(i);
                  progress = slides[i].progress;
  
                  if (progress <= 0) {
                    
                    slide.transform(
                      'translate3d(' +
                        progress * offsetX +
                        'px, ' +
                        Math.abs(progress) * offsetY +
                        'px, 0) scale(' +
                        (1 - Math.abs(progress) / 20) +
                        ')'
                    );
                    slide.css('opacity', progress + 3); 
                  }
  
                  if (progress > 0) {
                    slide.transform('rotate(' + -progress * 5 + 'deg)'); 
                  }
                }
              },
              transitionEnd: function() {
                slides = this.slides;
                if(this.activeIndex != 0) {
                  slides.eq(this.activeIndex - 1).css('opacity', 0)
                }
                
              },
              setTransition: function (swiper, transition) {
                for (var i = 0; i < this.slides.length; i++) {
                  var slide = this.slides.eq(i);
                  slide.transition(transition);
                }
              },
            },
          });
        })
      }
    });
  </script>
  {% endif %}
{% endif %}

{% schema %}
{
  "tag": "section",
  "class": "block_comment",
  "is_global": false,
  "name": {
    "zh_CN": "文字评论",
    "en_US": "Text Comments"
  },
  "max_blocks": "",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "placeholder": {
        "zh_CN": "请输入标题",
        "en_US": "Please enter title"
      },
      "default": "Comment"
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Short description"
      },
      "placeholder": {
        "zh_CN": "请输入描述",
        "en_US": "Please enter a description"
      },
      "default": "Comment Detail"
    },
    {
      "type": "card_select_show",
      "refresh": true,
      "label": {
        "zh_CN": "评论范围",
        "en_US": "Scope of comment"
      },
      "placeholder": {
        "zh_CN": "评论范围",
        "en_US": "Scope of comment"
      },
      "default": {
        "comment_range": "single",
        "good_id": {
          "id": "",
          "title": ""
        }
      },
      "id": "range_config",
      "default_setting": {
        "type": "card_select",
        "label": {
          "zh_CN": "评论范围",
          "en_US": "Scope of comment"
        },  
        "info": {
          "zh_CN": "1. 无评论时积木自动隐藏；2.「当前商品/专辑」仅详情页生效，其他全部页面生效；3. 选择专辑时，评论取自专辑内评论数前 50 的商品（商品缓存1小时更新）；4. 选择全部时，新评论因网页缓存需1小时后生效",
          "en_US": "1. Module hides automatically with no comments.  2. \"Current Product/Album\" only works on detail pages; others work across all pages.   3.  Selecting album: comments from its top 50 commented products (1-hour cache). 4. Selecting all: new comments take effect after 1 hour (due to web cache)"
        },
        "id": "comment_range",
        "option": [
          {
            "label": {
              "zh_CN": "所有商品",
              "en_US": "All goods"
            },
            "value": "all"
          },
          {
            "label": {
              "zh_CN": "当前商品",
              "en_US": "Current product"
            },
            "value": "current_product"
          },
          {
            "label": {
              "zh_CN": "指定商品",
              "en_US": "Specified product"
            },
            "value": "select_product"
          },
           {
            "label": {
              "zh_CN": "当前专辑",
              "en_US": "Current collection"
            },
            "value": "current_collection"
          }
        ],
        "default": "all"
      },
      "slot_settings": [
        {
          "value": "select_product",
          "settings": [
            {
              "type": "card_product",
              "label": {
                "zh_CN": "选择商品",
                "en_US": "Select product"
              },
              "default": {
                "id": "",
                "title": ""
              },
              "id": "good_id"
            }
          ]
        }
      ]
    },
    {
      "type": "card_slider",
      "id": "row",
      "max": "6",
      "min": "3",
      "label": {
        "zh_CN": "pc每排数量",
        "en_US": "PC number per row"
      },
      "default": "4"
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "移动端排版样式",
        "en_US": "Mobile layout style"
      },
      "default": "0",
      "id": "mobile_style",
      "option": [
        {
          "label": {
            "zh_CN": "竖向平铺",
            "en_US": "Vertical tiling"
          },
          "value": "0"
        },
        {
          "label": {
            "zh_CN": "横向切换",
            "en_US": "Horizontal switching"
          },
          "value": "1"
        }
      ]
    },
    {
      "type": "card_slider",
      "id": "num",
      "max": "20",
      "min": "2",
      "label": {
        "zh_CN": "评论总数",
        "en_US": "Total number of comments"
      },
      "default": "8"
    },
    {
      "type": "card_select",
      "id": "time",
      "label": {
        "zh_CN": "评论时间",
        "en_US": "Comment time"
      },
      "option": [
        {
          "label": {
            "zh_CN": "最新评论",
            "en_US": "Latest Comments"
          },
          "value": "desc"
        },
        {
          "label": {
            "zh_CN": "最早评论",
            "en_US": "First comment"
          },
          "value": "asc"
        }
      ],
      "default": "asc"
    },
    {
      "type": "card_select",
      "id": "level",
      "label": {
        "zh_CN": "评论星级",
        "en_US": "Review stars"
      },
      "option": [
        {
          "label": {
            "zh_CN": "五星",
            "en_US": "Five stars"
          },
          "value": "5"
        },
        {
          "label": {
            "zh_CN": "四星及以上",
            "en_US": "Four stars and above"
          },
          "value": "4"
        },
        {
          "label": {
            "zh_CN": "三星及以上",
            "en_US": "Three stars and above"
          },
          "value": "3"
        },
        {
          "label": {
            "zh_CN": "二星及以上",
            "en_US": "Two stars or above"
          },
          "value": "2"
        },
        {
          "label": {
            "zh_CN": "一星及以上",
            "en_US": "One star or above"
          },
          "value": "1"
        }
      ],
      "default": "4"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "查看更多文案",
        "en_US": "Text of view more"
      },
      "id": "more_text"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "title": "Customer Reviews",
      "detail": "",
      "range_config": {
        "comment_range": "all",
        "good_id": {
          "id": "",
          "title": ""
        }
      },
      "row": "3",
      "mobile_style": "1",
      "num": "6",
      "time": "asc",
      "level": "4",
      "more_text": "View More"
    },
    "blocks": []
  },
  "icon": "icon-Wenzi"
}
{% endschema %}
